<template v-if="isShowRef">

  <div id="header" v-if="isShowRef">
    <Header></Header>
  </div>
  <div class="main_header_1  " v-if="isShowRef" >
    <div class="main-head inner_1">
      <div class="job_info">
      <div class="w1">
        <p style=" color: #2052a4; padding-right: 10px; margin-bottom: 10px;">{{initJobData.jobName.value}}</p>
        <p style="color: rgb(208, 9, 9); margin-bottom: 10px;">{{initJobData.jobSalary.value}}</p>
      </div>
      <div class="w2">
        <span class="advantage">{{initJobData.jobAddress.value}}</span>
        <span class="advantage">{{initJobData.jobEdu.value}}</span>
        <span class="advantage">{{initJobData.jobEx.value}}</span>
        <span class="advantage">{{initJobData.jobAge.value}}</span>
      </div>                          

    </div>
    <div class="btn" v-if="isShowRef" >
      <el-button type="primary" v-if="!isApplyRef" @click="handleApplyJob(initJobData.jobId.value)">申请
      </el-button>
      <el-button type="info" v-if="isApplyRef" disabled>已申请</el-button>
      <el-button v-if="!isCollectionRef" class="btn1"
        @click="handleCollectionJob(initJobData.jobId.value)">收藏</el-button>

      <el-button v-if="isCollectionRef" class="btn1"
        @click="handleUnCollectionJob(initJobData.jobId.value)">已收藏</el-button>
    </div>
    </div>
    
  </div>
  <div id="main" class="inner_1 home-inner_1" v-if="isShowRef" >
    <div class="pos_detail">
      <div class="card">
        <div class="card_title">
          职位描述
        </div>
        <p class="describe">
          {{initJobData.jobDetail.value}}
        </p>

      </div>
      <div class="card">
        <div class="card_title">
          公司介绍
        </div>
        <p class="describe">
          {{initJobData.eDetail.value}}
        </p>
      </div>
      <div class="card" style="margin-bottom: 20px;">
        <p class="card_title">联系方式及地址</p>
        <p class="enterprise_contact_mode">联系人：<span class="contact_span">{{initJobData.contactName.value}}</span></p>
        <p class="enterprise_contact_mode">联系电话： <span class="contact_span">{{initJobData.contactPhone.value}}</span></p>
        <p class="enterprise_contact_mode">联系邮箱： <span class="contact_span">{{initJobData.contactEmail.value}}</span></p>
        <p class="enterprise_contact_mode">联系地址： <span class="contact_span">{{initJobData.contactAddress.value}}</span></p>
      </div>
    </div>

  </div>
  <div id="footer" v-if="isShowRef">
    <Footer></Footer>
  </div>
</template>
<script lang='ts'>
import { onMounted, ref, reactive, getCurrentInstance, watch, onBeforeMount, computed } from 'vue';
import { useStore } from "vuex"
import { useRoute } from 'vue-router';
import { elmessage, data } from "@/hook/hook"
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import { applyJob, upCollectionJob, getOneJobInfo } from "@/api/userApi"

import router from '@/router';
export default {
  name: 'PostionInfoPage',
  setup() {
    const route = useRoute()
    const store = useStore()

    const jobState = store.state.jobState.job
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
    const id = ref()
    const isApplyRef = ref(false)
    const isCollectionRef = ref(false)
    const isShowRef = ref(false)
    

    // 申请
    const handleApplyJob = async (jobId: string) => {
      // 这里的数据需要放回后端，并保存在相对应的表中，而不应该是push
      // 此按钮需要判断登录状态

      const newData = {
        ...data(),
        jobId: jobId,
        isApply: "true",
        applyState: "待查看"
      }
      applyJob(newData).then((res: any) => {
        elmessage(res.data.message, res.data.type)
        if (res.data.code=="200"){
          isApplyRef.value = true
        }
      })
      
    }

    //收藏
    const handleCollectionJob = async (jobId: string) => {
      
      const newData = {
        ...data(),
        jobId: jobId,
        isCollection: "true",

      }
      upCollectionJob(newData).then((res: any) => {
        elmessage(res.data.message, res.data.type)
        if (res.data.code=="200"){
          isCollectionRef.value = true
        }
        
      })
    }
    // 取消收藏
    const handleUnCollectionJob = async (jobId: string) => {
      isCollectionRef.value = false
      const newData = {
        ...data(),
        jobId: jobId,
        isCollection: "false",
      }
      upCollectionJob(newData).then((res: any) => {
        elmessage(res.data.message, res.data.type)
      })
    }

    const initJobData = {
      jobId: computed(() => jobState.jobId),
      jobName: computed(() => jobState.jobName),
      jobAge: computed(() => jobState.jobAge),
      jobEdu: computed(() => jobState.jobEdu),
      jobEx: computed(() => jobState.jobEx),
      jobAddress: computed(() => jobState.jobAddress),
      jobSalary: computed(() => jobState.jobSalary),
      jobIndustry: computed(() => jobState.jobIndustry),
      jobDetail: computed(() => jobState.jobDetail),
      eDetail: computed(() => jobState.eDetail),
      contactName: computed(() => jobState.contactName),
      contactPhone: computed(() => jobState.contactPhone),
      contactEmail: computed(() => jobState.contactEmail),
      contactAddress: computed(() => jobState.contactAddress),
      eName: computed(() => jobState.eName),
      eId: computed(() => jobState.eId),
      isApply:computed(()=>jobState.isApply),
      isCollection:computed(()=>jobState.isCollection),
      type:computed(()=>jobState.type),

    }
    const initApply = async () => {
      if (jobState.isApply == "true") {
        isApplyRef.value = true
      } else {
        isApplyRef.value = false
      }
      if (jobState.isCollection === "true") {
        isCollectionRef.value = true
      } else {
        isCollectionRef.value = false
      }
    }

    
    const init = async () => {
      const newData = {
        ...data(),
        jobId: route.query.jobId
      }
      await getOneJobInfo(newData).then((res: any) => {
        console.log(res.data);
        if (res.data["code"]=="200"){
          jobState.jobId = res.data["jobId"]
          jobState.jobName = res.data["jobName"]
          jobState.jobAge = res.data["jobAge"]
          jobState.jobEdu = res.data["jobEdu"]
          jobState.jobEx = res.data["jobEx"]
          jobState.jobAddress = res.data["jobAddress"]
          jobState.jobSalary = res.data["jobSalary"]
          jobState.jobIndustry = res.data["jobIndustry"]
          jobState.jobDetail = res.data["jobDetail"]
          jobState.eDetail = res.data["eDetail"]
          jobState.contactName = res.data["contactName"]
          jobState.contactPhone = res.data["contactPhone"]
          jobState.contactEmail = res.data["contactEmail"]
          jobState.contactAddress = res.data["contactAddress"]
          jobState.eName = res.data["eName"]
          jobState.eId = res.data["eId"]
          jobState.isApply = res.data["isApply"]
          jobState.isCollection = res.data["isCollection"]

          isShowRef.value=true
         
          
        }else{
          router.replace("/404")
        }
        
      })
 
    }
    watch(jobState,(newval,oldval)=>{
      initApply()
    },{immediate:true})
    
    onBeforeMount( () => {
      init()
      initJobData
      



    })
    return {
      Header,
      Footer,
      isShowRef,
      handleApplyJob,
      handleCollectionJob,
      handleUnCollectionJob,
      isApplyRef,
      isCollectionRef,
      initJobData,
    }
  }
}
</script>
<style scoped>
.btn1 {
  border: 1px solid #409EFF;
}

.pos_detail {
  min-width: 1000px;
  background-color: #FFF;
}

.card {
  padding-top: 20px;
  padding-left: 20px;
  height: auto;
  padding-right: 20px;

}

/* 公司介绍 */
.describe {
  font-size: 16px;
  line-height: 20px;
  text-indent: 2em;
  padding-right: 2px;
  white-space: pre-wrap;
  color: #4c4c4c;
  /* margin-top:50px; */
}

/* 联系方式 */
.contact_span {
  color: #4c4c4c;
}

.enterprise_contact_mode {
  font-size: 16px;

  color: #a6a6a6;
  line-height: 24px;
}

.card_title {
  font-size: 22px;
  margin-bottom: 20px;
}


.advantage {
  float: left;
  font-size: 14px;
  padding: 6px 10px;
  /* margin-left: ; */
  /* width: 120px; */
  color: #9497a1;
  border: 1px solid rgba(148, 151, 161, .3);
  border-radius: 2px;
  margin-right: 10px;
  /* margin-top: 15px; */
}

.w1 {

  font-size: 24px;
  display: inline-flex;
}

.main-head{
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.main_header_1 {
  height: 100px;
  width: 100% ;
  min-width: 1000px;

  background-color: #e1eefb;
  display: inline-flex;
 
  
}


.inner_1 {
  width: 1000px;
  margin: 0 auto;
}

.home-inner_1 {
  max-width: 1000px;
}

#header {
  font-family: '微软雅黑';
  height: 58px;
  background-color: #545c64;
}

#main {
  margin-top: 25px;
  height: auto;
  display: flex;
  min-height: 800px;
}

#footer {
  margin-top: 20px;
  height: 120px;
  background-color: #545c64;
  color: #FFF;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-family: '微软雅黑';
}
</style>